<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湖北省</title>
    <script src="./asset/echarts/echarts.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 准备一个容器，放置图表 -->
<div id="demo" style="width: 1000px;height: 600px;" class="container text-center">

</div>

<!-- 使用js绘制图表 -->
<script>
    //初始化
    var myChart = echarts.init(document.querySelector('#demo'))

    //指定图表的配置
    const piePatternSrc =
        '';
    const bgPatternSrc =
        '';
    const piePatternImg = new Image();
    piePatternImg.src = piePatternSrc;
    const bgPatternImg = new Image();
    bgPatternImg.src = bgPatternSrc;
    option = {
        backgroundColor: {
            image: bgPatternImg,
            repeat: 'repeat'
        },
        title: {
            text: '湖北省',
            textStyle: {
                color: '#235894'
            }
        },
        tooltip: {},
        series: [
            {
                name: 'pie',
                type: 'pie',
                selectedMode: 'single',
                selectedOffset: 30,
                clockwise: true,
                label: {
                    fontSize: 18,
                    color: '#235894'
                },
                labelLine: {
                    lineStyle: {
                        color: '#235894'
                    }
                },
                data: [
                    { value: 738, name: '柑橘种植技术' },
                    { value: 517, name: '病虫害防治' },
                    { value: 436, name: '柑橘品种' },
                    { value: 337, name: '柑橘百科' },
                    { value: 345, name: '视频' }
                ],
                itemStyle: {
                    opacity: 0.7,
                    color: {
                        image: piePatternImg,
                        repeat: 'repeat'
                    },
                    borderWidth: 3,
                    borderColor: '#235894'
                }
            }
        ]
    };
    myChart.setOption(option)

</script>
<link rel="stylesheet" href="./asset/bootstrap@5.3.0/css/bootstrap.min.css">
</body>
</html>
